<template>
  <el-form ref="ruleFormRef" style="max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e4e7ed; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); background-color: #fff;" :model="ruleForm" :rules="rules" label-width="auto"
    class="demo-ruleForm" :size="formSize" status-icon>
    <h2 style="text-align: center; margin-bottom: 20px; color: #303133;">用户信息表单</h2>
    <el-form-item label="用户名:" prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输入用户名" style="width: 100%;" />
    </el-form-item>
    <el-form-item label='性别:' prop='sex'>
      <el-radio-group v-model="ruleForm.sex" style="display: flex; gap: 10px;">
        <el-radio :value="true" size="small">男</el-radio>
        <el-radio :value="false" size="small">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="所在地址:">
      <div id="app">
        <el-cascader size="large" :options="pcaTextArr" v-model="selectedOptions" @change="getAddress()" placeholder="请选择地址" style="width: 100%;">
        </el-cascader>
      </div>
    </el-form-item>
    <el-form-item label="详细信息:" prop="address">
      <el-input v-model="ruleForm.address" type="textarea" placeholder="请输入详细信息" style="width: 100%;" />
    </el-form-item>
    <el-form-item style="text-align: center; margin-top: 20px;">
      <el-button type="primary" @click="submitForm(ruleFormRef)" style="margin-right: 10px;">
        确定
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCounterStore } from "@/stores/counter"
import {read,write} from "@/axios/axiosHelper"
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";

const getAddress = () => {
  console.log(selectedOptions.value);
  ruleForm.economizeName = selectedOptions.value[0]
  ruleForm.marketName = selectedOptions.value[1]
  ruleForm.cityName = selectedOptions.value[2]
}

const selectedOptions = ref([]);

const store = useCounterStore();

interface RuleForm {
  name: string,
  sex: boolean,
  economizeName: string,
  marketName: string,
  cityName: string,
  address: string,
  userId: number,
  createTime: string,
  modifyId: string,
  updateTime: string,
  // isDelete: number
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: "",
  sex: true,
  economizeName: '',
  marketName: '',
  cityName: '',
  address: "",
  userId: store.counterStore.userId,
  createTime: "2025-02-21T03:23:30.646Z",
  modifyId: "0",
  updateTime: "2025-02-21T03:23:30.646Z",
  // isDelete: "true"
})

//判断条件
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      write.post('/write/api/Main/AddMain',
        {
          name: ruleForm.name,
          sex: ruleForm.sex,
          economizeName: selectedOptions.value[0],
          marketName: selectedOptions.value[1],
          cityName: selectedOptions.value[2],
          userId: ruleForm.userId,
          createTime: ruleForm.createTime,
          modifyId: ruleForm.modifyId,
          updateTime: ruleForm.updateTime,
          address: ruleForm.address
        }
      ).then(res => {
        console.log(res.data)
        if (res.data.code == 200) {
          ElMessage.success('添加成功')
        }
        else {
          ElMessage.error('添加失败')
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>